<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{height:100%;}
    .cont{width: 90%;height: 90%;background: black;margin: 0 auto;position: relative;}
    .fire{width: 10px;height: 20px;position: absolute;}
    .s_fire{width: 10px;height: 10px;border-radius: 50%;position: absolute;}
  </style>
</head>
<body>
  <div class="cont"></div>
</body>
<script src="../move.js"></script>
<script>

  // 烟花：元素运动，一个光点，就是一个元素对象

  // 数据：初始位置，目标位置，类型，容器

  // 方法：
  // 创建元素，设置初始位置（初始样式）
  // 插入页面
  // 开始运动到目标位置
  // 到达之后删除

  class Fire{
    constructor( { start, target, type, cont, className } ){
      // 接收并解析参数（数据）
      this.start = start;
      this.target = target;
      this.type = type;
      this.cont = cont;
      this.className = className;
      // 执行创建元素，设置初始样式
      this.createElement();
    }
    createElement(){
      this.ele = document.createElement("div");
      this.ele.className = this.className;
      this.cont.appendChild(this.ele);
      this.ele.style.background = randomColor();
      this.ele.style.left = this.start.x + "px";
      this.ele.style.top = this.start.y + "px";
      // 执行运动功能
      this.move();
    }
    move(){
      // 借助运动函数
      move(this.ele, {
        left: this.target.x,
        top: this.target.y
      }, ()=>{
        this.ele.remove();
        // 运动结束后，判断是否需要炸开
        if(this.type === 0){
          // 执行创建小烟花功能
          this.createSmall()
        }
      })
    }
    createSmall(){
      for(let i=0;i<random(10,20);i++){
        // 利用当前类，重复创建烟花对象
        new Fire({
          start: this.target,
          target: {
            x: random(0, this.cont.offsetWidth-10), y: random(0, this.cont.offsetHeight-20)
          },
          type: 1,
          cont: this.cont,
          className: "s_fire"
        })
      }
    }
  }


  const cont = document.querySelector(".cont");
  const contW = cont.offsetWidth;
  const contH = cont.offsetHeight;

  // 点击事件只是一种触发方式，与烟花效果自身无关系
  document.onclick = function(){

    const startX = random(0, contW-10);
    new Fire({
      start: {
        x: startX, y: contH
      },
      target: {
        x: startX, y: random(0, contH-100)
      },
      type: 0,
      cont,
      className: "fire"
    })
    
  }


  function randomColor(){
    return `rgb(${random(150,255)},${random(150,255)},${random(150,255)})`;
  }
  function random(a,b){
    return Math.round(Math.random()*(a-b)+b)
  }


  
</script>
</html>